<template>
  <div class="main-container">
    <main-fixed :title="fixedTitle" :resize="true">
      <div slot="list">
        <el-tree
          :data="companiesTree"
          :props="defaultProps"
          node-key="F_DepartmentId"
          ref="cTree"
          :default-expand-all="true"
          @node-click="handleNodeClick"
        >
		<span class="custom-tree-node" slot-scope="{ node, data }">
		        <i class="icon-map-site"></i>
		        <span>{{ data.F_FullName}}</span>
		 </span>
		</el-tree>
      </div>
    </main-fixed>
    <main-content :title="contentTitle" :paddingLeft="205" padding-top="94">
      <div slot="search">
        <div class="search-box">
          <el-input
            v-model="searchParam.keyword"
            size="small"
            placeholder="请输入要查询的关键字"
            style="width: 200px; margin-right:5px"
          ></el-input>
          <avue-input-tree
            default-expand-all
            v-model="searchParam.Department_Id"
            placeholder="请选择部门"
            type="tree"
            :dic="companiesDepartments"
            size="small"
            style="width: 200px; margin-right:5px"
          ></avue-input-tree>
          <el-button type="primary" icon="el-icon-search" size="small" @click="searchPosts">搜索</el-button>
          <el-button icon="el-icon-refresh" size="small" @click="searchReset">重置</el-button>
        </div>
      </div>
      <div slot="table">
        <!-- 在此处放置表格内容 -->
        <!-- 表格 -->
        <avue-crud
          ref="cuTable"
          v-if="companyId"
          :data="postsList"
          :option="option"
          @row-click="handleCurrentRowChange"
          @row-dblclick="handleRowDBLClick"
        >
          <template slot="menuLeft">
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="small"
              v-if="hasButtonPermission('add')"
              @click="showFormDialog('add')"
              >{{$t('buttonModule.addBtn')}}</el-button
            >
            <el-button
              
              size="small"
              v-if="hasButtonPermission('addmember')"
              @click="addMember"
              >{{$t('orgRoleManagement.addMemberBtn')}}</el-button
            >
            <el-button
              
              size="small"
              v-if="hasButtonPermission('lookmember')"
              @click="lookUser"
              >{{$t('orgRoleManagement.viewMemberBtn')}}</el-button
            >
            <OrgImport type="post"></OrgImport>
          </template>
          <template slot-scope="scope" slot="menu">
            <el-button
              type="opr-primary"
              size="mini"
              v-if="hasButtonPermission('modify')"
              @click="showFormDialog('edit', scope.row)"
              
              >{{$t('tableOperationModule.editorBtn')}}</el-button
            >
            <el-button
              type="opr-danger"
              size="mini"
              v-if="hasButtonPermission('delete')"
              @click="deleteRowDepartment(scope.row)"
               
              >{{$t('tableOperationModule.deleteBtn')}}</el-button
            >
          </template>
        </avue-crud>
      </div>
    </main-content>
    <!-- 新增 -->
    <el-dialog v-dialogDrag
      :title="dialogTitle"
      :append-to-body="true"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="30%"
      :before-close="handleClose"
    >
      <div class="companiesuser-form custom-form">
        <el-form
          :rules="rules"
          ref="postsForm"
          :model="postsForm"
          label-width="80px"
          :validate-on-rule-change="false"
        >
          <el-col :span="24" v-if="hasFormPermission('F_EnCode')">
            <el-form-item prop="F_EnCode" :label="$t('orgPostManagement.addModal.labelPostNum')">
              <el-input
                :placeholder="$t('orgPostManagement.addModal.placeholderPostNum')"
                size="small"
                v-model="postsForm.F_EnCode"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="hasFormPermission('F_Name')">
            <el-form-item prop="F_Name" :label="$t('orgPostManagement.addModal.labelPostName')">
              <el-input
                :placeholder="$t('orgPostManagement.addModal.placeholderPostName')"
                size="small"
                v-model="postsForm.F_Name"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="hasFormPermission('F_DepartmentId')">
            <el-form-item prop="F_DepartmentId" :label="$t('orgPostManagement.addModal.labelDepartID')">
              <avue-input-tree
                default-expand-all
                v-model="postsForm.F_DepartmentId"
                :placeholder="$t('orgPostManagement.addModal.placeholderDepartID')"
                type="tree"
                :dic="companiesDepartments"
                size="small"
                style="width: 100%"
              ></avue-input-tree>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="hasFormPermission('F_ParentId')">
            <el-form-item :label="$t('orgPostManagement.addModal.labelParentId')" prop="F_ParentId">
              <avue-input-tree
                default-expand-all
                :props="defaultPostProps"
                v-model="postsForm.F_ParentId"
                :placeholder="$t('orgPostManagement.addModal.placeholderParentId')"
                type="tree"
                :dic="allPostList"
                size="small"
              ></avue-input-tree>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="hasFormPermission('F_Description')">
            <el-form-item :label="$t('orgPostManagement.addModal.labelRemark')">
              <el-input
                type="textarea"
                :placeholder="$t('orgPostManagement.addModal.placeholderRemark')"
                size="small"
                :autosize="{ minRows: 4, maxRows: 10 }"
                maxlength="800"
                show-word-limit
                v-model="postsForm.F_Description"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="cancelForm('postsForm')"
          >{{$t('buttonModule.modalCancelBtn')}}</el-button
        >
        <el-button
          size="mini"
          type="primary"
          @click="postsFormSubmit('postsForm')"
          :loading="flagFormSub"
          >{{flagFormSub?$t('workFlow.WFMenu.hintSubmit'):$t('buttonModule.modalSureBtn')}}</el-button
        >
      </span>
    </el-dialog>
    <!-- 添加成员 -->
    <el-dialog v-dialogDrag
      :title="$t('orgPostManagement.addMemberTitle')"
      :append-to-body="true"
      :visible.sync="memberDialogVisible"
      :close-on-click-modal="false"
      width="60%"
      style="padding: 10px 20px;"
    >
      <SelectUser
        v-if="memberDialogVisible"
        ref="addPesonelRef"
        :selectedList="selectedList"
      ></SelectUser>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="cancelMemberDialog()">{{$t('buttonModule.modalCancelBtn')}}</el-button>
        <el-button size="mini" type="primary" @click="confirmMemberDialog()" :loading="flagMember"
          >{{flagMember?$t('workFlow.WFMenu.hintSubmit'):$t('buttonModule.modalSureBtn')}}</el-button
        >
      </span>
    </el-dialog>
    <el-dialog v-dialogDrag
      :title="$t('orgPostManagement.viewMemberTitle')"
      :append-to-body="true"
      :visible.sync="lookUserDialog"
      width="60%"
      :before-close="luDClose"
      :close-on-click-modal="false"
    >
      <List
        v-if="lookUserDialog"
        type="user"
        :list="userList"
        @clickSelected="getSelectUser"
      ></List>
    </el-dialog>
  </div>
</template>

<script>
import MainFixed from "@/page/main/MainFixed";
import MainContent from "@/page/main/MainContent";
import List from "@/components/organization/components/List";
import { FormatTree } from "@/util/util.js";

import SelectUser from "@/components/organization/SelectUser";

import OrgImport from "./components/OrgImport.vue";
import {
  getCompaniesTree,
  getCompaniesDepartments
} from "@/api/organization/user";
import {
  getPosts,
  addPosts,
  modifyPosts,
  deletePosts,
  lookUser,
  addUser
} from "@/api/organization/post";
import authorizeMixin from "@/mixins/authorize"; //鉴权混入
import tableOptionMixin from "@/mixins/tableOption"; //table 高度计算
import { deepClone } from "@/util/util";
import { getStore } from "@/util/store";
import {validateLength} from "@/api/organization/validateFunc";
export default {
  name: "PostManagement",
  mixins: [authorizeMixin,tableOptionMixin],
  components: { MainContent, MainFixed, List, SelectUser,OrgImport },
  data() {
    return {
      flagFormSub: false,
      flagMember: false,
	    computedHeight:-60,	
      fixedTitle:this.$t('orgPostManagement.fixedTitle'),
      contentTitle: "岗位列表",
      memberDialogVisible: false,
      companiesTree: [],
      companiesTreeDialog: [],
      companiesDepartments: [],
      postsList: [],
      userList: [],
      selectedList: [],
      allPostList: [],
      flag: false,
      postsId: "",
      postsForm: {
        F_CompanyId: "",
        F_EnCode: "",
        F_Name: "",
        F_DepartmentId: "",
        F_ParentId: "",
        F_Description: "",
        F_DepartmentName: ""
      },
      companyId: "",
      searchParam: {
        keyword: null,
        Department_Id: ""
      },
      defaultProps: {
        children: "children",
        label: "F_FullName"
      },
      defaultPostProps: {
        value: "F_PostId",
        label: "F_Name",
        children: "children"
      },
      postsProps: {
        children: "children",
        label: "F_Post"
      },
      dialogTitle: "",
      dialogVisible: false,
      dialogType: "add",
      parentVisible: false,
      lookUserDialog: false,
      option: {
        rowKey: "F_Name",
        highlightCurrentRow: true,
        stripe: false,
        addBtn: false,
        menuWidth: 150,
        border: false,
        page: false,
        index: true,
        indexLabel:this.$t('orgPostManagement.tabNum'),
        align: "center",
        menuAlign: "center",
        delBtn: false,
        editBtn: false,
        defaultExpandAll: true,
        column: [
          {
            label:  this.$t('orgPostManagement.tabName'),
            prop: "F_Name",
            align: "left",
			sortable:true
          },
          {
            label:  this.$t('orgPostManagement.tabEnCode'),
            prop: "F_EnCode",
			 align: 'left',
			 sortable:true
          },
          {
            label:  this.$t('orgPostManagement.tabDepartID'),
            prop: "F_DepartmentName",
			 align: 'left',
			 sortable:true
          },
          {
            label:this.$t('orgPostManagement.tabRemark'),
            prop: "F_Description",
			align:'left',
			sortable:true
          },
          {
            label:this.$t('orgPostManagement.tabManager'),
            prop: "F_Manager",
			 align: 'left',
			 sortable:true
          }
        ]
      },
      rules: {
        F_EnCode: [
          { required: true, message:this.$t('orgPostManagement.addModal.placeholderPostNum'), trigger: "blur" },
          { validator:validateLength,trigger:"change"}
        ],
        F_Name: [
          { required: true, message:this.$t('orgPostManagement.addModal.placeholderPostName'), trigger: "blur" },
          { validator:validateLength,trigger:"change"}
        ],
        F_DepartmentId: [
          { required: true, message: this.$t('orgPostManagement.addModal.placeholderDepartID'), trigger: "blur" }
        ]
      },
	  F_DepartmentId:''
    };
  },
  created() {
    this.getCompaniesTree();
  },
  mounted(){
	  let themeName = getStore({ name: "themeName" }) || "default";
	  if((themeName == "eveningTheme" && window.screen.width<1346)||(themeName != "eveningTheme" &&window.screen.width<1346)){
	    this.computedHeight =32;
	  }
	  this.changeBodyHeight();
  	},
  methods: {
    handleRowDBLClick (row, event) {
      if(this.hasButtonPermission('modify')&&this.openDoubleClickEdit){
        this.showFormDialog('edit', row)
      }
    },
    formateParentTree(data) {
      let list = [];
      data.forEach(item => {
        let temp = {
          F_PostId: "",
          F_Name: this.$t('orgUserManagement.addModal.placeholderSelect'),
          disabled: false,
          children: []
        };
        temp.F_PostId = item.F_PostId;
        temp.F_Name = item.F_Name;
        if (
          this.postsForm.F_PostId &&
          this.postsForm.F_PostId == item.F_PostId
        ) {
          temp.disabled = true; //将正在编辑的部门disabled
        }
        if (item.children.length > 0) {
          temp.children = this.formateParentTree(item.children);
        }
        list.push(temp);
      });
      return list;
    },
    /* 获取公司树形菜单数据 */
    getCompaniesTree() {
      getCompaniesTree().then(res => {
        this.companiesTree = res.data.data;
        this.companiesTreeDialog = res.data.data;
        this.companyId = res.data.data[0].F_CompanyId;
		this.F_DepartmentId= res.data.data[0].children[0].F_DepartmentId;
		this.searchParam.Department_Id = this.F_DepartmentId;
		this.getPostsList();
		this.getDep(res.data.data[0].F_CompanyId);
        /* 左侧树形菜单默认选中第一个 */
        this.$nextTick(function() {
          this.$refs.cTree.setCurrentKey(this.F_DepartmentId);
          
        });
      });
    },
    /* 选择树形菜单加载公司用户信息 */
    handleNodeClick(data) {
      this.postsId = "";
      this.searchParam.keyword = null;
      this.searchParam.Department_Id = data.F_DepartmentId;
	    this.F_DepartmentId= data.F_DepartmentId;
      this.companyId = data.F_CompanyId;
      this.getDep(data.F_CompanyId);
      this.getPostsList();
    },
    getPostsList() {
      getPosts(this.companyId, this.searchParam).then(res => {
        this.postsList = res.data.data;
      });
    },
    /* 获取公司部门 */
    getDep(id) {
      getCompaniesDepartments(id).then(res => {
        let tree = FormatTree(
          res.data.data,
          "F_DepartmentId",
          "F_FullName",
          "children"
        );
        this.companiesDepartments = tree;
      });
    },
    /* 打开弹窗 */
    showFormDialog(type, row = {}) {
      this.dialogType = type;
      this.dialogVisible = true;
      this.getParentList();
      if (type == "add") {
        this.dialogTitle = this.$t('orgPostManagement.addModal.modalTitle');
        this.postsForm = {F_DepartmentId:this.F_DepartmentId};
      } else {
        this.dialogTitle =  this.$t('orgPostManagement.editInforTitle');
        this.postsForm = deepClone(row);
      }
    },
    /* 提交表单 */
    postsFormSubmit(formName) {
      this.flagFormSub = true;
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.dialogType == "add") {
            this.postsForm.F_CompanyId = this.companyId;
            addPosts(this.postsForm).then(() => {
              this.dialogVisible = false;
              this.getPostsList();
            }).finally(()=>{
              this.flagFormSub = false;
            });
          } else {
            modifyPosts(this.postsForm.F_PostId, this.postsForm).then(() => {
              this.dialogVisible = false;
              this.getPostsList();
            }).finally(()=>{
              this.flagFormSub = false;
            });
          }
        } else {
          this.flagFormSub = false;
          return false;
        }
      });
    },
    /* 取消弹窗 */
    cancelForm(formName) {
      this.flagFormSub = false;
      this.dialogVisible = false;
      this.$refs[formName].clearValidate();
    },
    /* 关闭弹窗 */
    handleClose(done) {
      this.$refs['postsForm'].resetFields();
      done();
    },
    /* 重置表单 */
    ruleForm() {
      this.companiesUserForm = {};
    },
    /* 表格单行选中 */
    setCurrent(row) {
      this.$refs.cuTable.setCurrentRow(row);
    },
    /* 编辑弹窗触发 */
    handleCurrentRowChange(val) {
      this.postsId = val.F_PostId;
      // this.postsForm = deepClone(val);
    },
    /* 表格删除 */
    deleteRowDepartment(row) {
      this.$confirm(this.$t('deletePrompt.promptContent'), this.$t('deletePrompt.promptTitle'), {
        confirmButtonText:this.$t('buttonModule.modalSureBtn'),
        cancelButtonText:this.$t('buttonModule.modalCancelBtn'),
        type: "warning"
      })
        .then(() => {
          deletePosts(row.F_PostId).then(() => {
            this.$notify({
              title: this.$t('deletePrompt.successTitle'),
              message: this.$t('deletePrompt.successDeleted'),
              type: "success"
            });
            this.getPostsList();
          });
        })
        .catch(() => {});
    },
    getParentList() {
      getPosts(this.companyId).then(res => {
        if (res.data.success) {
          this.allPostList = [
            { F_PostId: "0", F_Name: this.$t('orgUserManagement.addModal.placeholderSelect') },
            ...this.formateParentTree(res.data.data)
          ];
        }
      });
    },
    selectPosts(data) {
      this.postsForm.F_ParentId = data.F_PostId;
      this.postsForm.F_ParentName = data.F_Post;
    },
    cancelPosts() {
      this.parentVisible = false;
    },
    /* 查看成员 */
    lookUser() {
      if (this.postsId === "") {
        this.$message({
          message: this.$t('deletePrompt.hintSelectData'),
          type: "warning"
        });
      } else {
        lookUser(this.postsId).then(res => {
          this.userList = res.data.data;
          this.lookUserDialog = true;
        });
      }
    },
    luDClose() {
      this.lookUserDialog = false;
    },
    getSelectUser(index) {},
    /* 查询 */
    searchPosts() {
      this.getPostsList();
    },
    /* 查询表单重置 */
    searchReset() {
      this.searchParam.keyword = null;
      this.searchParam.Department_Id = null;
    },

    addMember() {
      console.log("this.postsId:--===",this.postsId)
      if (this.postsId === "") {
        this.$message({
          message:this.$t('deletePrompt.hintSelectData'),
          type: "warning"
        });
      } else {
        lookUser(this.postsId).then(res => {
          this.selectedList = res.data.data;
          this.memberDialogVisible = true;
        });
      }
    },
    cancelMemberDialog() {
      this.flagMember = false;
      this.memberDialogVisible = false;
    },
    confirmMemberDialog() {
      this.flagMember = true;
      let userIds = this.$refs.addPesonelRef.pushParentData().map(ele => {
        return ele.F_UserId;
      });
      // if (userIds.length <= 0) {
      //   return false;
      // }
      let params = { userIds: userIds, postId: this.postsId };
      addUser(params).then(res => {
        if (res.data.success) {
          this.$notify({
            title:this.$t('deletePrompt.successTitle'),
            message:this.$t('orgRoleManagement.Hint.addSuccess'),
            type: "success"
          });
        } else {
          this.$notify({
            title: this.$t('deletePrompt.failureTitle'),
            message:this.$t('orgRoleManagement.Hint.addFailed'),
            type: "warning"
          });
        }
        this.cancelMemberDialog();
      });
    }
  }
};
</script>

<style scoped>
/* css */
.main-container {
  height: 100%;
  padding: 0 8px;
}
.parentPosts {
  width: 100%;
  height: 420px;
  display: flex;
}
.parentPosts .tree,
.parentPosts .list {
  height: 100%;
  overflow-y: scroll;
}
.parentPosts .list {
  flex: 1;
}
/* .parentPosts {
  width: 100%;
  height: 420px;
}
.parentPosts .tree {
  float: left;
  width: 50%;
  height: 100%;
  overflow-y: scroll;
}
.parentPosts .list {
  float: right;
  width: 50%;
  height: 100%;
  overflow-y: scroll;
} */

@media screen and (max-width: 1370px) {
  div ::v-deep.el-dialog {
    margin-top: 8vh !important;
  }
}
  div ::v-deep .custom-tree-node span{
  	font-size: 14px;
  	padding-left: 10px;
  }
  div ::v-deep .custom-tree-node i{
  	font-size: 12px!important;
  }
  @media screen and (max-width: 1346px) {
  	   ::v-deep .avue-crud__left{
  		margin-left:5px!important;
  		float: left;
  		margin-top: 40px;
  	   } 
  	}	
</style>
